<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>投诉</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			body{
				width: 10rem;
			}
			.box{
				padding: 5px 15px 120px 15px;
			}
			.top{
				font-size: 16px;
				margin-top:20px ;
				margin-bottom: 12px;
			}
			.top span{
				color: red;
			}
			.yuanyin li{
				list-style: none;
				margin-bottom: 18px;
				font-size: 16px;
			}
			
			.tui-checkbox:checked {
				background:#23b8ff;
			}
			.tui-checkbox {
				width:25px;
				height:25px;
				background-color:#ffffff;
				border:solid 1px #aaa;
				-webkit-border-radius:50%;
				border-radius:50%;
				font-size:0.8rem;
				margin-right:15px;
				padding:0;
				position:relative;
				display:inline-block;
				vertical-align:top;
				cursor:default;
				-webkit-appearance:none;
				-webkit-user-select:none;
				user-select:none;
				-webkit-transition:background-color ease 0.1s;
				transition:background-color ease 0.1s;
			}
			.tui-checkbox:checked::after {
				content:'';
				top:5px;
				left:5px;
				position:absolute;
				background:transparent;
				border:#fff solid 2px;
				border-top:none;
				border-right:none;
				height:6px;
				width:10px;
				-moz-transform:rotate(-45deg);
				-ms-transform:rotate(-45deg);
				-webkit-transform:rotate(-45deg);
				transform:rotate(-45deg);
			}
			.wenti{
				position: relative;
			}
			.wenti1{
				    font-size: 14px;
				    overflow: auto;
				    width: 100%;
				    height: 92px;
				    line-height: 18px;
				    margin-bottom: 15px;
				
			
				
			}
			.bottom{
				margin-top: 12px;
				margin-bottom: 20px;
			}
			.bottom h2{
				font-size: 16px;
			}
			.bottom span{
				font-size: 14px;
				color: #777;
			}
			.bottom1{
				width: 100%;
				height: 52px;
				line-height: 52px;
				text-align: center;
				font-size: 16px;
				background-color: #eeeeee;
				color: #bbb;
				position: fixed;
				bottom: 0px;
		</style>
	</head>
	<body>
		<div class="box">
			<div class="top">
				<p><span>*</span> 投诉原因 (多选)</p>
			</div>
			<div class="yuanyin">
				
				<ul>
					<li><input name="checkbox"  type="checkbox" class="tui-checkbox ">上课涉及违规内容（色情、赌博、欺诈、广告骚扰信息、暴恐血腥、侵犯未成年人权益、违法犯罪及违禁品、其他违规内容）</li>
					<li><input name="checkbox"  type="checkbox" class="tui-checkbox ">讲课内容与课程描述不符</li>
					<li><input name="checkbox"  type="checkbox" class="tui-checkbox ">老师没有来上课</li>
					<li><input name="checkbox"  type="checkbox" class="tui-checkbox ">诱导学员私下交易</li>
					<li><input name="checkbox"  type="checkbox" class="tui-checkbox ">宣传其他平台/网站</li>
					<li><input name="checkbox"  type="checkbox" class="tui-checkbox ">课程内容广告过多</li>
					<li><input name="checkbox"  type="checkbox" class="tui-checkbox ">视频加载失败、卡住无法播放</li>
					<li><input name="checkbox"  type="checkbox" class="tui-checkbox ">视频不流畅、黑屏、模糊</li>
				</ul>
			</div>
			<div class="wenti">
				<textarea class="wenti1" placeholder="问题描述"></textarea>
				
			</div>
			<div class="bottom">
				<h2>上传截图<span>(最多3张图，每张不超过2M)</span></h2>
			</div>
			<div>
				<img src="shangchuan.png" >
			</div>
		</div>
		
		<div class="bottom1">
			提交
		</div>
	</body>
</html>
